<script setup lang="ts">
import { ref, onMounted } from 'vue'
import useRecipients from '@/hooks/reci/certificateCode';
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const {
    currentPage4,
    pageSize4,
    total4,
    Item,
    CertificateCode,
    recipientsList,
    dialog,
    recipientsList_data,
    rules,
    cancel,
    handleSizeChange,
    handleCurrentChange,
    importRecipients,
    queryRecipientsList,
    handleAdd,
    handleAddsubmit,
    handleDelete
} = useRecipients()

onMounted(() => {
    queryRecipientsList();
})

let formrecipients = ref() // 抽屉表单对象


</script>

<template>
    <div class="spinner" v-if="counterStore.flag">
        <div class="spinnerin"></div>
    </div>
    <el-card>
        <el-form class="form">
            <el-form-item label="Item:" style="margin-right: 10px;">
                <el-input v-model="Item" placeholder="please enter Item"></el-input>
            </el-form-item>
            <el-form-item label="Certificate Code:" style="margin-right: 10px;">
                <el-input v-model="CertificateCode" placeholder="please enter Certificate Code" style="width: 220px;"
                    </el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="queryRecipientsList" type="primary">搜索</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card>
        <template #header>
            <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks"
                            icon="InfoFilled" icon-color="#626AEF" title="导入数据会先清除原所有数据，请确认是否继续？"
                            @confirm="importRecipients">
                            <template #reference>
                                <el-button type="primary">导入数据</el-button>
                            </template>
                        </el-popconfirm>
        </template>
        <el-scrollbar style="height: calc(100vh - 350px);"> <!-- 菜单滚动条 -->
            <el-table :data="recipientsList" style="width: 100%">
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column prop="Item" label="Item"></el-table-column>
                <el-table-column prop="CertificateCode" label="Certificate Code"></el-table-column>
                <el-table-column label="操作" width="150px">
                    <template #default="scope">
                        <el-button size="small" type="success"
                            @click="handleAdd(scope.row.id, scope.row.Item, scope.row.CertificateCode)">编辑</el-button>
                        <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks"
                            icon="InfoFilled" icon-color="#626AEF" title="是否确认删除该行数据?"
                            @confirm="handleDelete(scope.row.id)">
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
        <footer style="margin: 10px 0;">
            <!-- 
                currentPage4: 当前页数
                pageSize4: 每页显示条数
                total4: 总条数
                handleSizeChange: 每页显示条目个数改变时触发
                handleCurrentChange: 当前页数改变时触发
             -->
            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                :page-sizes="[3, 5, 7, 10, 15, 20]" background layout="total, sizes, prev, pager, next, jumper"
                :total="total4" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </footer>
    </el-card>
    <!-- 抽屉 添加/编辑用户 -->
    <el-drawer ref="drawerRef" v-model="dialog" title='编辑' class="demo-drawer">
        <el-form ref="formrecipients" :model="recipientsList_data" :="rules" label-width="80px">
            <el-form-item label="id">
                <el-input v-model="recipientsList_data.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="Item" prop="Item">
                <el-input v-model="recipientsList_data.Item" placeholder="请输入Item"></el-input>
            </el-form-item>
            <el-form-item label="CertificateCode" prop="CertificateCode">
                <el-input v-model="recipientsList_data.CertificateCode" placeholder="请输入CertificateCode"></el-input>
            </el-form-item>
            <el-form-item>
                <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" icon="InfoFilled"
                    icon-color="#626AEF" title="是否编辑该行数据?" @confirm="handleAddsubmit(formrecipients)">
                    <template #reference>
                        <el-button type="primary">提交</el-button>
                    </template>
                </el-popconfirm>

                <el-button type="danger" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

</template>

<style scoped lang="scss">
.form {
    height: 50px;
    display: flex;
}

.spinner {
  width: 3em;
  height: 3em;
  position: absolute;
  top: 50%;
  left: 50%;

  //最顶层
  z-index: 9999;
  cursor: not-allowed;
  border-radius: 50%;
  border: 2px solid #444;
  box-shadow: -10px -10px 10px #6359f8, 0px -10px 10px 0px #9c32e2, 10px -10px 10px #f36896, 10px 0 10px #ff0b0b, 10px 10px 10px 0px#ff5500, 0 10px 10px 0px #ff9500, -10px 10px 10px 0px #ffb700;
  animation: rot55 0.7s linear infinite;
}

.spinnerin {
  border: 2px solid #444;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes rot55 {
  to {
    transform: rotate(360deg);
  }
}

</style>